<template>
  <div class="musicScore-list" v-loading="loading">
    <ul class="list">
      <li
        class="musicScore-wrapper"
        v-for="(item, index) in MusicScores"
        :key="index"
        :style="{ gridRowEnd: getGridRowEnd(index) }"
      >
        <MusicScoreCard :musicScore="item" />
      </li>
    </ul>
    <div v-if="!hasMore" class="no-more">没有更多数据了</div>
    <div v-else class="load-more" @click="loadMoreMusicScore">
      <i class="el-icon-bottom"></i> 加载更多
    </div>
  </div>
</template>

<script>
import MusicScoreCard from '@/components/MusicScore/MusicScoreCard'
import InfiniteScroll from 'vue-infinite-scroll'
import { getMusicScoreList } from '../../api/modules/musicScore'

export default {
  data() {
    return {
      MusicScores: [],
      loading: false,
      hasMore: true,
      limit: this.isMobile ? 5 : 20,
      page: 1,
      columns: 4, // 列数
      columnHeights: [] // 保存每列的高度
    }
  },
  components: {
    MusicScoreCard
  },
  directives: {
    InfiniteScroll
  },
  mounted() {
    this.$nextTick(() => {
      this.loadMoreMusicScore()
      this.$bus.$on('SwitchListByTagId', this.getMusicScoreListByTag)
    })
  },
  beforeDestroy() {
    this.$bus.$off('SwitchListByTagId', this.getMusicScoreListByTag)
  },
  methods: {
    // 加载更多音乐分数
    async loadMoreMusicScore() {
      if (this.loading || !this.hasMore) return
      const { limit, page } = this
      this.loading = true
      let res
      // 通过是否选择了指定标签变换列表
      if (this.isSwitchTag) {
        res = await this.$API.musicScore.getMusicScoreByTagId(
          this.tagId,
          limit,
          page
        )
      } else {
        res = await this.$API.musicScore.getMusicScoreList(
          this.limit,
          this.page
        )
      }
      if (!res.data) {
        this.loading = false
        this.hasMore = false
      }
      if (res.status === 200) {
        const newMusicScores = res.data.payload
        this.MusicScores.push(...newMusicScores)
        this.page++
        this.loading = false
      }
    },
    // 通过tagId获取音乐分数列表
    async getMusicScoreListByTag(id) {
      this.page = 1
      const { limit, page } = this
      let res
      console.log(id)
      // 全部标签或指定标签
      if (id == 'all') {
        this.isSwitchTag = false
        res = await this.$API.musicScore.getMusicScoreList(limit, page)
      } else {
        this.isSwitchTag = true
        this.tagId = id
        res = await this.$API.musicScore.getMusicScoreByTagId(id, limit, page)
      }
      console.log(res)
      if (!res.data) this.MusicScores = []
      if (res.status == 200) {
        this.MusicScores = res.data.payload
      }
    },
    getGridRowEnd(index) {
      const columnIndex = index % this.columns
      const height = this.columnHeights[columnIndex]
      return `span ${Math.ceil(height / 100)}` // 以100px为单位确定每行高度
    },
    updateColumnHeights() {
      this.columnHeights = Array(this.columns).fill(0)
      this.MusicScores.forEach((item, index) => {
        const columnIndex = index % this.columns
        const height = item.height // 这里根据实际情况获取每个元素的高度
        this.columnHeights[columnIndex] += height
      })
    }
  },
  watch: {
    MusicScores() {
      this.updateColumnHeights()
    }
  }
}
</script>

<style scoped src="@/assets/style/modules/musicScore/musicScoreList.css">
</style>
